<template>
  <section :style="{ 'margin-top': top }" class="newsListStyleTwo">
    <section class="home-main">
      <van-pull-refresh
        id="newsmain"
        v-model="isLoading"
        :style="{
          height:
            'calc(100vh - ' +
            headerHeight() +
            ')'
        }"
        @refresh="onRefresh"
      >
        <van-list
          v-model="loading"
          :finished="finished"
          :finished-text="finishedText"
          :immediate-check="false"
          :offset="20"
          @load="onLoad"
        >
          <ul>
            <li v-for="(item, index) in list" :key="index">
              <section class="item-left">
                <section class="left-title etc3">
                  {{ item.mainTitle || "" }}
                </section>
                <section class="left-txt">
                  <!-- <span>{{ item.pageview | toDecimal }}次浏览</span> -->
                  <span>{{ item.publishTime | newFormatTime }}</span>
                </section>
              </section>
              <section class="item-right">
                <van-image class="one" :src="item.coverImgIdUrl">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/default-placeholder.png" alt>
                  </template>
                </van-image>
              </section>
            </li>
          </ul>
        </van-list>
      </van-pull-refresh>
    </section>
  </section>
</template>

<script>
import mixins from '../mixins'
import mixin from './mixins'

export default {
  name: 'NewsListStyleTwo',
  mixins: [mixins, mixin],
  inject: ['headerHeight'],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      list: [],
      page: 1,
      pageSize: 10,
      total: 0,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      isLoadError: false,
      isNoData: false,
      defaultList: [
        {
          mainTitle: '健康专区',
          publishTime: '2022-11-16',
          newFormatTime: '2022-11-30',
          coverImgIdUrl: ''
        },
        {
          mainTitle: '健康专区',
          publishTime: '2022-11-18',
          newFormatTime: '2022-11-30',
          coverImgIdUrl: ''
        }
      ]
    }
  },

  async created() {
    if (this.isInitData) {
      await this.initData()
      //   this.clsList = result.clsList.data.data
    } else {
      this.list = this.defaultList
      this.finished = true
    }
  },
  methods: {
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      if (result !== 'error') {
        this.finished = false
        const { dataList } = result
        const res = dataList
        const { rows, total } = res.data || {}
        this.list.push(...rows)
        this.loading = false
        this.isLoading = false
        this.isNoData = total < 1
        if (this.isNoData) {
          this.finishedText = ''
        } else {
          this.finishedText = '已经到底了'
        }
        if (this.list.length >= total) {
          this.finished = true
        } else {
          this.finished = false
        }
      }
    },
    /**
     * 刷新
     */
    onRefresh() {
      return new Promise((sesolve, reject) => {
        this.finished = false
        this.page = 1
        this.dataList = []
        this.initData()
        reject()
      })
    },

    /**
     * 上拉加载
     */
    onLoad() {
      this.page += 1
      this.initData()
    }
  }
}
</script>

<style lang='scss'>
@import "@/styles/utility/rem.scss";

.newsListStyleTwo {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header-text {
    width: 70%;
    margin: 0 auto;
    text-align: center;
  }

  .home-main {

    .van-pull-refresh {
      -webkit-overflow-scrolling: touch;

      ul {
        background-color: #fff;
        border-radius: rem(16);

        li {
          display: flex;
          align-items: center;
          box-sizing: border-box;
          padding: rem(30);
          position: relative;

          &::after {
            content: '';
            height: 1px;
            background-color: #f1f1f1;
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
          }

          &:last-child::after {
            height: 0;
          }

          .item-left {
            flex: 1;
            padding-right: rem(10);

            .left-title {
              font-size: rem(30);
              font-family: PingFang SC Medium, PingFang SC Medium-Medium;
              font-weight: 600;
              text-align: left;
              color: #333333;
              line-height: rem(44);
            }

            .left-txt {
              margin-top: rem(30);
              font-size: rem(22);
              font-family: PingFang SC Regular, PingFang SC Regular-Regular;
              font-weight: 400;
              text-align: left;
              color: #999999;

              > span {
                display: inline-block;
                margin-right: rem(20);
              }
            }
          }

          .item-right {
            flex-shrink: 0;
            width: rem(228);
            height: rem(148);
            border-radius: rem(8);

            .one {
              border-radius: rem(8);
              display: block;
              width: 100%;
              height: rem(148);

              .van-image__error {
                border-radius: rem(8);

                > img {
                  width: rem(120);
                  height: rem(120);
                }

              }
            }
          }
        }
      }
    }
  }
}
</style>
